<template>
  <div class="agent-container">
    <div class="stage">
      <button @click="battle">战斗</button>
      <div class="history">
        <div v-for="(item, index) in printer?.history || []" :key="index" class="item">
          <div v-if="item?.dataType === 'image'">
            <img :src="item?.text" alt="" />
          </div>
          <div v-else>
            {{ item?.text }}
          </div>
        </div>
        <div v-if="printer?.loading" class="line current loading">
          <span class="prompt">{{ printer?.loadingCharacter }}</span>
        </div>
      </div>
      <div class="turtle">
        <div class="image">
          <img src="https://img1.baidu.com/it/u=2543466215,1265359274&fm=253&fmt=auto&app=138&f=JPEG?w=342&h=342" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import aiw, { Printer }from '@/aiw-agent';

const state = reactive({
  
})

const printer = ref(new Printer({
  asciiImage: true,
}));

const battle = () => {
  aiw.bridge.send('agent.chat', {
    systemPrompt: '我们来玩一个游戏，我们扮演两只海龟进行战斗，海龟的攻击力是1，每次攻击后，海龟的血量会减少1，当血量减少到0时，海龟就会死亡，游戏结束。请告诉我你的攻击力，然后我们开始战斗。',
    prompt: '你好，我是小海龟，请和我进行一场战斗吧！',
  }, { stream: true })
}

onMounted(() => {
  aiw.bridge.on('agent.chat', ({ status, data, message }, isStream, id, source) => {
    // console.log('agent chat:', status, data, message, isStream, id, source)
    printer.value.autoPrint({ status, data, message }, isStream, id, source);
  })
})
</script>
<style lang="scss" scoped>
.agent-container {
  height: 100%;
  padding: 16px 16px 200px 16px;
  box-sizing: border-box;
  .stage {
    height: 100%;
  }
  .turtle {
    width: fit-content;
    .image {
      height: 100px;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}
</style>